import React from "react";
import { Component } from "react";
import Table from "uxcore-table";

import "./Rymdd.less";

function RymddRow({ data }) {
  return (
    <Table
      height={258}
      size="small"
      showHeaderBorder
      showColumnPicker={false}
      className="kuma-uxtable-border-line"
      jsxcolumns={[
        {
          dataKey: "name",
          title: "目的地",
          width: 165,
          align: "center",
        },
        {
          dataKey: "count",
          title: "数量",
          width: 145,
          align: "center",
        },
      ]}
      jsxdata={{
        data,
      }}
    />
  );
}

/**
 * 复工人员目的地统计数据
 */
export default class Rymdd extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { data } = this.props;
    return (
      <div className="rymdd-content-wrap">
        <RymddRow data={data.slice(0, 5)} />
        <RymddRow data={data.slice(5, 10)} />
        <RymddRow data={data.slice(10)} />
      </div>
    );
  }
}
